<template>
	<view class="maintenanceReport">
		<view class="content">
			<view class="item" @click="godetails">
				<view class="title">
					<view class="">
						浴霸不出水了
					</view>
					<view class="Tags">
						审核中
					</view>
				</view>
				<view class="item-content">
					<view class="content-items">
						<text class="names">报修房屋</text>
						<text>南航碧桂园小区101栋2单元401</text>
					</view>
					<view class="content-items">
						<text class="names">报修项目</text>
						<text>水暖-浴霸</text>
					</view>
					<view class="content-items">
						<text class="names">报修日期</text>
						<text>2021/09/09</text>
					</view>
				</view>
			</view>
			<view class="item" @click="godetails">
				<view class="title">
					<view class="">
						浴霸不出水了
					</view>
					<view class="Tags" style="background-color: #fddfdf;color: #f46363;">
						维修中
					</view>
				</view>
				<view class="item-content">
					<view class="content-items">
						<text class="names">报修房屋</text>
						<text>南航碧桂园小区101栋2单元401</text>
					</view>
					<view class="content-items">
						<text class="names">报修项目</text>
						<text>水暖-浴霸</text>
					</view>
					<view class="content-items">
						<text class="names">报修日期</text>
						<text>2021/09/09</text>
					</view>
				</view>
			</view>
		</view>
		<button class="Btn" @click="goMain"> + 申请维修</button>
	</view>
</template>

<script setup>
	const goMain = () => {
		uni.navigateTo({
			url: '/pages/server/views/EnterSelectMain/EnterSelectMain'
		})
	}
	const godetails = () => {
		uni.navigateTo({
			url: "/pages/server/views/MaintenanceDetails/MaintenanceDetails"
		})
	}
</script>

<style lang="scss">
	.maintenanceReport {
		height: calc(100vh - 60rpx);
		padding: 30rpx;
		background-color: #fcfdfe;

		.Btn {
			background-color: #006eff;
			color: white;
			font-size: 35rpx;
		}

		.content {
			.item {
				padding: 30rpx;
				background-color: white;
				border: 2rpx solid #f2f2f2;
				margin-bottom: 30rpx;

				.item-content {
					font-size: 28rpx;

					.content-items {
						margin: 30rpx 0rpx;
					}

					.names {
						color: #9a9a9a;
						margin-right: 20rpx;
					}
				}

				.title {
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;
					padding-bottom: 30rpx;
					margin-bottom: 30rpx;
					border-bottom: 2rpx solid #f2f2f2;

					.Tags {
						font-size: 26rpx;
						background-color: #d4f6e3;
						padding: 5rpx 25rpx;
						color: #2ed477;
						border-radius: 8rpx;
					}
				}
			}
		}
	}
</style>